{
	name:"ImageDrawer",
	onInit(){
		this.$event.on(EN.img_done,this.onImagePick.bind(this))
		this.ghostCvs.addEventListener("dblclick",()=>{
			if(!this.active)return;
			this.$event.emit(EN.action,{action:"onWebPick"})
		})
		this.ctrlIndex = 0
	},
	draw(stepData,ctx){
		let {src,x,y,w,h} = stepData.step[0]
		let image = new Image()
		image.onload = ()=>{
			ctx.save()
			ctx.translate(x,y)
			ctx.scale(0.5,0.5)
			ctx.drawImage(image,0,0,w*2,h*2)
			ctx.restore()
		}
		image.src = src
	},
	onImagePick(src){
		if(!this.active)return;
		if(!src)return
		let image = new Image()
		image.onload = ()=>{
			let cvs = this.ghostCvs
			let {width,height} = image
			let flag = Math.max(width,height)>500
			let scale = flag?1:2;
			let w = width*scale
			let h = height*scale
			let s = this.$env.get("scale")
			let step = {
				w:w*s,
				h:h*s,
				src,
				x:-w*s/2,
				y:-h*s/2
			}
			let stepData = {
				step:[step],
				state:this.getContextState()
			}
			this.$version.commit(Action.Image,stepData)
		}
		image.src = src.text||src
	},
	pathFocus(stepData){
		let step = stepData.step
		let {src,x,y,w,h} = step[0]
		let ctx = this.ghostCtx
		ctx.save()
		ctx.globalAlpha = 0.4
		ctx.globalCompositeOperation = "lighter"
		ctx.fillStyle = "#0f0"
		ctx.beginPath()
		ctx.fillRect(x,y,w,h)
		ctx.closePath()
		this.draw(stepData,ctx)
		ctx.restore()
	}
}